import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/a.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/common/app_spaces.dart';
import 'package:finance_app/src/page/tutorial/helper/tutorial_mark.dart';
import 'package:finance_app/src/page/tutorial/tutorial_assistant_page.dart';
import 'package:finance_app/src/page/tutorial/tutorial_camera_page.dart';
import 'package:finance_app/src/page/tutorial/tutorial_drawer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class TutorialPage extends StatefulWidget {
  final List<TutorialMark> marks;
  const TutorialPage({Key key, @required this.marks}) : super(key: key);

  @override
  _TutorialPageState createState() => _TutorialPageState();
}

class _TutorialPageState extends State<TutorialPage> {
  int currentIndex = 0;
  bool drawerOpen = false;
  @override
  Widget build(BuildContext context) {
    MediaQueryData queryData = MediaQuery.of(context);
    return WillPopScope(
      onWillPop: () async {
        return false;
      },
      child: GestureDetector(
        onTap: onNextScreen,
        child: Scaffold(
          backgroundColor: Color.fromRGBO(118, 118, 118, 0.8),
          body: SizedBox(
            width: queryData.size.width,
            height: queryData.size.height,
            child: Stack(
              children: [
                ...buildChild(),
                IgnorePointer(child: TutorialDrawer(isOpen: drawerOpen)),
                if (drawerOpen)
                  Align(
                    alignment: Alignment.centerRight,
                    child: Padding(
                      padding: const EdgeInsets.only(right: 10.0),
                      child: ElevatedButton(
                          style: ButtonStyle(
                              backgroundColor: MaterialStateProperty.all<Color>(
                                  aceBlueColor)),
                          onPressed: null,
                          child: Text(
                            S.current.next,
                            style: TextStyle(color: Colors.white),
                          )),
                    ),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  List<Widget> buildChild() {
    List<Widget> widgets = [];

    for (var i = 0; i < widget.marks.length; i++) {
      TutorialMark mark = widget.marks[i];
      RenderBox box = mark.key.currentContext.findRenderObject();
      Offset position = box.localToGlobal(Offset.zero);
      widgets.add(Transform.translate(
          offset: position,
          child: Visibility(visible: i == currentIndex, child: mark.widget)));

      if (i == 0)
        widgets.add(
          Transform.translate(
            offset: Offset(0, position.dy + 55),
            child: Visibility(
                visible: currentIndex == 0,
                child: Center(
                  child: Column(
                    children: [
                      buildArrow(A.assetsImagesTutorialArrowTab),
                      Text(
                        S.current
                            .what_you_need_to_start_the_day_right___your_business_at_a_glance,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.w700, color: Colors.white),
                      ),
                      AppSpaces.h10,
                      ElevatedButton(
                          style: ButtonStyle(
                              backgroundColor: MaterialStateProperty.all<Color>(
                                  aceBlueColor)),
                          onPressed: null,
                          child: Text(
                            S.current.next,
                            style: TextStyle(color: Colors.white),
                          )),
                    ],
                  ),
                )),
          ),
        );
      if (i == 1)
        widgets.add(
          Transform.translate(
            offset: Offset(0, position.dy - 80),
            child: Visibility(
                visible: currentIndex == 1,
                child: Center(
                  child: Column(
                    children: [
                      Text(
                        S.current
                            .skip_manual_paperwork_and_save_time_by_scanning_your_receipts_instead,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.w700, color: Colors.white),
                      ),
                      AppSpaces.h10,
                      buildArrow(A.assetsImagesTutorialArrowCamera),
                    ],
                  ),
                )),
          ),
        );

      if (i == 2)
        widgets.add(
          Transform.translate(
            offset: Offset(position.dx - 210, position.dy + 10),
            child: Visibility(
                visible: currentIndex == 2,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    buildArrow(A.assetsImagesTutorialArrowAssistant),
                    Text(
                      S.current
                          .our_trusty_and_reliable_assistant__just_like_your_personal_secretary,
                      textAlign: TextAlign.right,
                      style: TextStyle(
                          fontWeight: FontWeight.w700, color: Colors.white),
                    ),
                    AppSpaces.h10,
                  ],
                )),
          ),
        );

      if (i == 3)
        widgets.add(
          Transform.translate(
            offset: Offset(25, position.dy + 10),
            child: Visibility(
                visible: currentIndex == 3,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(left: 15.0),
                      child: buildArrow(A.assetsImagesTutorialArrowDrawer),
                    ),
                    Text(
                      S.current
                          .not_sure_where_to_explore_start_by_checking_what_we_have,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.w700, color: Colors.white),
                    ),
                    AppSpaces.h10,
                  ],
                )),
          ),
        );
      if (i == 4)
        widgets.add(
          Transform.translate(
            offset: Offset(0, position.dy - 60),
            child: Visibility(
                visible: currentIndex == 4,
                child: Center(
                  child: Column(
                    children: [
                      Text(
                        S.current.ready_to_create_your_first_transaction,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.w700, color: Colors.white),
                      ),
                      AppSpaces.h10,
                      buildArrow(A.assetsImagesTutorialArrowTransaction)
                    ],
                  ),
                )),
          ),
        );
    }

    return widgets;
  }

  Widget buildArrow(String imagePath) {
    return SvgPicture.asset(
      imagePath,
      width: getDp(55),
      height: getDp(55),
    );
  }

  void onNextScreen() async {
    if (currentIndex == 0) {
      nextIndex();
    } else if (currentIndex == 1) {
      await Navigator.push(context,
          MaterialPageRoute(builder: (context) => TutorialCameraPage()));
      nextIndex();
    } else if (currentIndex == 2) {
      await Navigator.push(context,
          MaterialPageRoute(builder: (context) => TutorialAssistantPage()));
      nextIndex();
    } else if (currentIndex == 3 && drawerOpen == false) {
      setState(() {
        drawerOpen = true;
      });
    } else if (currentIndex == 3 && drawerOpen == true) {
      setState(() {
        drawerOpen = false;
      });
      nextIndex();
    } else if (currentIndex == 4) {
      nextIndex();
    }

    if (currentIndex == widget.marks.length) {
      Navigator.pop(context);
    }
  }

  void nextIndex() {
    setState(() {
      currentIndex++;
    });
  }
}
